🤠 개요

• closes: Feat: 헤더와 채널에 이미지 src 추가 #127
• 프로필과 채널에 이미지가 표시되도록 변경했어요.

💫 설명

• 기존에 프로필을 불러오는 API에서 응답 형식이 변경되어서 해당 형식을 적용했어요.

• 채널의 경우 이미지가 있으면 해당 이미지를 보여주고 채널 이름을 숨겨요

• 만약 채널에 이미지가 없다면 채널 이름의 두 글자만 표시되도록 우선 변경했어요.

• 채널 이미지와 관련해서 의논할 부분이 생겼어요.

  • 지금은 원형 전체의 75퍼센트가 사진이고 25퍼센트가 게임 종류를 나타내요.

  • 왼쪽부터 1, 2, 3이라고 할 때 1번이 원본 사진이라고 했을 때 원래라면 2번 처럼 원본 사진의 75퍼센트만 보이고 25퍼센트를 가리면서 게임 종류를 나타내야하는데 지금은 3번처럼 전체 사진을 75%에 맞게 크기를 줄여서 사용해요.

  • 이 부분을 어떻게 2번 처럼 표시할 지 모르겠어요.

• 지금 아래와 같은 구조로 채널 컴포넌트를 만들었어요.

<ChannelBtn>
   <div>채널 제목</div>
   <div>게임 종류</div>
</ChannelBtn>


const ChannelBtn = styled.button<{ url?: string }>`
  background: linear-gradient(to bottom, #344051 75%, #202b37 25%);
  ${(prop) =>
    prop.url &&
    css`
      background-image: url(${prop.url});
      background-size: 100% 75%;
      background-position: center top; /* 배경 이미지를 가운데 정렬하고 위에서부터 정렬합니다. */
      background-repeat: no-repeat; /* 배경 이미지 반복을 비활성화합니다. */
    `}
  &:hover {
    border-radius: 30%;
  }
`;

• 원형 모양을 그려야해서 상위 ChannelBtn에 border-radius: 50%로 원형 모양을 그렸고 ChannelBtn에서 배경색을 미리 지정했어요.
  • ChannelBtn이 아니라 하위 div에서 배경색을 지정하려고 했는데 저기 반원과 비슷한 모양으로 border-radius를 주기 힘들더라구요.

📷 스크린샷 (Optional)